<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!--360浏览器优先以webkit内核解析-->
	<title></title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
	<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>
<style>
	body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;}
	.box{ width: 400px; height: 400px;margin:100px auto; border-radius: 50%;position: relative;}
	/*原点*/
	.origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;}
	/* 指针 */
	.clock_line{ position: absolute;position:absolute;z-index:20;}
	.hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px;
		transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;}
	.minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000;
		transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;}
	.second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60;
		transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;}

	.dot_box{width: inherit; height: inherit;}
	/*时钟数*/
	.dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;}
	.clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7;
		position:absolute;top:199px;left:200px;}
	.scale-show{ width:12px;height:2px;background-color:#555;float:left;}
	.scale-hidden{width:183px;height:2px;float:left;}
	/*日期*/
	.date_info{width:160px;height:28px;
		line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555;
		font-weight:bold;}
	.time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; }
	.time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;}
	#minute_time{border-left:1px solid #fff;border-right:1px solid #fff;}
</style>
<body class="gray-bg">
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<h1 th:align="center" th:text="计算机设备运维系统管理平台"></h1>
<h3 th:align="center" id="times"></h3>
<div class="box" id="clock">
	<!-- 原点 -->
	<div class="origin"></div>
	<!-- 时钟数 -->
	<div class="dot_box">
		<div class="dot">6</div>
		<div class="dot">5</div>
		<div class="dot">4</div>
		<div class="dot">3</div>
		<div class="dot">2</div>
		<div class="dot">1</div>
		<div class="dot">12</div>
		<div class="dot">11</div>
		<div class="dot">10</div>
		<div class="dot">9</div>
		<div class="dot">8</div>
		<div class="dot">7</div>
	</div>
	<!-- 时、分、秒针 -->
	<div class="clock_line hour_line" id="hour_line"></div>
	<div class="clock_line minute_line" id="minute_line"></div>
	<div class="clock_line second_line" id="second_line"></div>
	<!-- 日期 -->
	<div class="date_info" id="date_info"></div>
	<!-- 时间 -->
	<div class="time_info" >
		<div class="time" id="hour_time"></div>
		<div class="time" id="minute_time"></div>
		<div class="time" id="second_time"></div>
	</div>
</div>
<script type="text/javascript">
	var times=document.getElementById("times")
	function sz(){
		t=setInterval(function(){
			//获取时间对象
			var dd=new Date();
			//获取年月日，时分秒
			var y=dd.getFullYear();
			var m=dd.getMonth()+1;
			var d=dd.getDate();
			var h=dd.getHours();
			var i=dd.getMinutes();
			var s=dd.getSeconds();
			var wkday = dd.getDay();
			if (m < 10) m = "0" + m;
			if (d < 10) d = "0" + d;
			if (h < 10) h = "0" + h;
			if (i < 10) i = "0" + i;
			if (s < 10) s = "0" + s;
			times.innerHTML=y+"年"+m+"月"+d+"日"+"   "+h+":"+i+":"+s+" "+"星期"+"日一二三四五六".charAt(wkday);
		},1000)
	}
	sz()
</script>

<script th:src="@{/js/jquery.min.js}"></script>
<script>
	$(function(){
		var clock = document.getElementById("clock");
		function initNumXY(){
			// 1、12个数字的位置设置
			var radius = 160;//大圆半价
			var dot_num = 360/$(".dot").length;//每个div对应的弧度数
			//每一个dot对应的弧度;
			var ahd = dot_num*Math.PI/180;
			$(".dot").each(function(index, el) {
				$(this).css({
					"left":180+Math.sin((ahd*index))*radius,
					"top":180+Math.cos((ahd*index))*radius
				});
			});
			// 2、刻钟设置
			for(var i = 0; i < 60; i++) {
				clock.innerHTML += "<div class='clock-scale'> " +
						"<div class='scale-hidden'></div>" +
						"<div class='scale-show'></div>" +
						"</div>";
			}
			var scale = document.getElementsByClassName("clock-scale");
			for(var i = 0; i < scale.length; i++) {
				scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";
			}
		}
		initNumXY();//调用上面的函数
		//获取时钟id
		var hour_line = document.getElementById("hour_line"),
				minute_line = document.getElementById("minute_line"),
				second_line = document.getElementById("second_line"),
				date_info=document.getElementById("date_info"),//获取date_info
				hour_time = document.getElementById("hour_time"),// 获去时间id
				minute_time = document.getElementById("minute_time"),
				second_time = document.getElementById("second_time");
		//3、设置动态时间
		function setTime(){
			var nowdate = new Date();
			//获取年月日时分秒
			var year = nowdate.getFullYear(),
					month = nowdate.getMonth()+1,
					day = nowdate.getDay(),
					hours = nowdate.getHours(),
					minutes = nowdate.getMinutes(),
					seconds = nowdate.getSeconds(),
					date = nowdate.getDate();
			var weekday =["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
			// 获取日期id
			date_info.innerHTML=year+"年"+month+"月"+date+"日   "+weekday[day];
			hour_time.innerHTML = hours >=10 ? hours : "0"+hours;
			minute_time.innerHTML = minutes >=10 ? minutes : "0"+minutes;
			second_time.innerHTML = seconds >=10 ? seconds : "0"+seconds;
			//时分秒针设置
			var hour_rotate = (hours*30-90) + (Math.floor(minutes / 12) * 6);
			hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
			minute_line.style.transform = 'rotate(' + (minutes*6 - 90) + 'deg)';
			second_line.style.transform = 'rotate(' + (seconds*6 - 90)+'deg)';
		}
		// setTime();
		setInterval(setTime, 1000);


	});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div>
</body>
</html>
